<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="500" height="320"></canvas>
<script>
const canvas = document.getElementById('circuitCanvas');
const ctx = canvas.getContext('2d');

// --- Style and Configuration ---
ctx.lineWidth = 3;
ctx.strokeStyle = 'black';
ctx.font = 'italic 24px serif';
ctx.fillStyle = 'black';

// --- Define coordinates ---
const batX = 80;
const batTopY = 110;
const batBottomY = 170;

const topWireY = 60;
const bottomWireY = 260;

const switchPivotX = 150;
const switchContactX = 210;

const junctionX = 250;
const resX = junctionX;
const capX = 400;

// --- Draw Main Wires ---
// Bottom wire rail
ctx.beginPath();
ctx.moveTo(batX, bottomWireY);
ctx.lineTo(capX, bottomWireY);
ctx.stroke();

// Top wire rail, from switch to the rest of the circuit
ctx.beginPath();
ctx.moveTo(switchContactX, topWireY);
ctx.lineTo(capX, topWireY);
ctx.stroke();

// --- Draw Left Branch (Battery and Switch) ---
// Connecting wires for the left branch
ctx.beginPath();
ctx.moveTo(batX, batBottomY);
ctx.lineTo(batX, bottomWireY);
ctx.moveTo(batX, batTopY);
ctx.lineTo(batX, topWireY);
ctx.lineTo(switchPivotX, topWireY);
ctx.stroke();

// Battery symbol
ctx.lineWidth = 3; // Standard line width for positive plate
ctx.beginPath();
ctx.moveTo(batX - 30, batTopY);
ctx.lineTo(batX + 30, batTopY);
ctx.stroke();
ctx.lineWidth = 5; // Thicker line for negative plate
ctx.beginPath();
ctx.moveTo(batX - 20, batBottomY);
ctx.lineTo(batX + 20, batBottomY);
ctx.stroke();
ctx.lineWidth = 3; // Reset to standard

// Switch symbol
ctx.beginPath();
ctx.arc(switchPivotX, topWireY, 5, 0, 2 * Math.PI); // Pivot point
ctx.stroke();
ctx.beginPath();
ctx.arc(switchContactX, topWireY, 5, 0, 2 * Math.PI); // Contact point
ctx.stroke();
ctx.beginPath();
ctx.moveTo(switchPivotX, topWireY);
ctx.lineTo(switchContactX + 5, topWireY - 25); // Open switch arm
ctx.stroke();


// --- Draw Resistor Branch ---
// Connecting wires for resistor
ctx.beginPath();
ctx.moveTo(resX, topWireY);
ctx.lineTo(resX, 130); // Wire down to resistor
ctx.moveTo(resX, 200); // Wire from resistor
ctx.lineTo(resX, bottomWireY);
ctx.stroke();

// Resistor symbol (zig-zag)
ctx.beginPath();
ctx.moveTo(resX, 130);
const resWidth = 20;
const numSegments = 7;
const segmentHeight = (200 - 130) / numSegments;
let currentY = 130;
for (let i = 0; i < numSegments; i++) {
    const nextX = resX + ((i % 2 === 0) ? -resWidth : resWidth);
    ctx.lineTo(nextX, currentY + segmentHeight / 2);
    currentY += segmentHeight;
    ctx.lineTo(resX, currentY);
}
ctx.stroke();

// Label 'R'
ctx.fillText('R', resX - 45, 170);


// --- Draw Capacitor Branch ---
// Connecting wires for capacitor
ctx.beginPath();
ctx.moveTo(capX, topWireY);
ctx.lineTo(capX, 145); // Wire down to capacitor
ctx.moveTo(capX, 175); // Wire from capacitor
ctx.lineTo(capX, bottomWireY);
ctx.stroke();

// Capacitor symbol (plates)
const plateWidth = 40;
ctx.lineWidth = 4; // Use thicker lines for plates as in the image
ctx.beginPath();
ctx.moveTo(capX - plateWidth / 2, 145);
ctx.lineTo(capX + plateWidth / 2, 145);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(capX - plateWidth / 2, 175);
ctx.lineTo(capX + plateWidth / 2, 175);
ctx.stroke();
ctx.lineWidth = 3; // Reset to standard

// Label 'C'
ctx.fillText('C', capX + 30, 165);

</script>
</body>
</html>